<template>
  <div>
    <div style="margin-top: 15px; width: 90%">
      <el-input placeholder="请输入档案号/姓名/电话" v-model="tankai">
        <el-button
          slot="prepend"
          type="primary"
          plain
          icon="el-icon-plus"
          @click="add"
          >新增</el-button
        >
        <el-button
          slot="append"
          type="primary"
          icon="el-icon-search"
          @click="info()"
          >搜索</el-button
        >
      </el-input>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="filenumber"
        label="档案号"
        width="180"
      ></el-table-column>
      <el-table-column prop="name" label="姓名"  > </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="180"
        :formatter="formatteraa"
      >
      </el-table-column>
      <el-table-column prop="age" label="年龄"  > </el-table-column>
      <el-table-column prop="user.fullname" label="健康管理师" >
      </el-table-column>
      <el-table-column prop="phonenumber" label="手机号码" >
      </el-table-column>
      <el-table-column prop="createtime" label="注册时间" >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog
      class="dialog"
      title="新增预约"
      :visible.sync="dialogFormVisible"
      width="1000px"
    >
      <el-form status-icon label-width="50px" class="demo-ruleForm">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form
              :rules="rules"
              :model="ruleForm"
              ref="ruleForm"
              style="width: 850px"
            >
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="档案号"
                      prop="filenumber"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        disabled  
                        v-model="member.filenumber"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="身份证"
                      prop="idcard"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="ruleForm.idcard"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="密码登录"
                      prop="password"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="ruleForm.password"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="手机号"
                      prop="phonenumber"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="ruleForm.phonenumber"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="姓名"
                      prop="name"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="ruleForm.name"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="性别"
                      prop="sex"
                      :label-width="formLabelWidth"
                    >
                      <el-radio v-model="ruleForm.sex" label="1" border
                        >女</el-radio
                      >
                      <el-radio v-model="ruleForm.sex" label="2" border
                        >男</el-radio
                      >
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="年龄"
                      prop="age"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        type="number"
                        v-model="ruleForm.age"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="出生日期"
                      :label-width="formLabelWidth"
                    >
                      <el-date-picker
                        v-model="ruleForm.birthday"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                      <el-input
                        v-model="ruleForm.email"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="婚姻状态"
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="Memberinfo.maritalstatus"
                        placeholder="请选择"
                      >
                        <el-option label="未婚" value="0"> </el-option>
                        <el-option label="已婚" value="1"> </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="职业" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberinfo.job"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="文化程度"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="Memberinfo.educationdegree"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="籍贯" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberinfo.nativeplace"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <div></div>
                </el-col>
                <el-col :span="2">.</el-col>
                <el-col :span="10">
                  <div>
                    <el-form-item label="档案状态">
                      <el-select
                        v-model="Memberinfo.status"
                        placeholder="请选择"
                      >
                        <el-option label="禁用" value="0"></el-option>
                        <el-option label="可用" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="ruleForm.remark"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="动态信息" name="second">
            <el-form v-model="Memberdynamicinfo">
              <el-row>
                <el-col :span="6">
                  <div class="grid-content bg-purple-dark">
                    <el-form-item label="身高" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberdynamicinfo.height"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-dark">
                    <el-form-item label="体重" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberdynamicinfo.weight"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-dark">
                    <el-form-item label="舒张压" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberdynamicinfo.dbp"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-dark">
                    <el-form-item label="收缩压" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberdynamicinfo.sbp"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="呼吸" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberdynamicinfo.breth"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="体温" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberdynamicinfo.thermometer"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="腰围" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberdynamicinfo.waistline"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="臀围" :label-width="formLabelWidth">
                      <el-input
                        v-model="Memberdynamicinfo.hipline"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="病史" name="third">
            <el-form v-model="Membermedicalhistory" style="width: 850px">
              <el-form-item label="既往史" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="Membermedicalhistory.previoushistory"
                ></el-input>
              </el-form-item>
              <el-form-item label="家族史" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="Membermedicalhistory.familyhistory"
                ></el-input>
              </el-form-item>
              <el-form-item label="过敏史" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="Membermedicalhistory.allergichistory"
                ></el-input>
              </el-form-item>
              <el-form-item label="病史" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="Membermedicalhistory.medicalhistory"
                ></el-input>
              </el-form-item>
              <el-form-item label="慢性病" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="Membermedicalhistory.chronicdisease"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addmember">确 定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 50]"
        :page-size="num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!--编辑或者添加的模态框-->
    <el-dialog title="编辑员工信息" :visible.sync="dialogVisible" width="60%">
      <div>
        <el-form
          :model="member"
          ref="member"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="编号" prop="id">
            <el-input disabled v-model="member.id"></el-input>
          </el-form-item>
          <el-form-item label="档案号" prop="filenumber">
            <el-input disabled v-model="member.filenumber"></el-input>
          </el-form-item>
          <el-form-item label="会员名" prop="name">
            <el-input v-model="member.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-input v-model="member.sex"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="member.age"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="member.phonenumber"></el-input>
          </el-form-item>
          <el-form-item label="注册时间" prop="createtime">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="member.createtime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm('member')">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="温馨提示" :visible.sync="visible" width="60%">
      <span>确认要删除{{ member.name }}嘛？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
  
  <script>
export default {
  data() {
    return {
      activeName: "first",
      ruleForm: {
        filenumber: "",
        idcard: "",
        password: "",
        phonenumber: "",
        name: "",
        sex: "",
        age: "",
      },
      rules: {
        idcard: [
          { required: true, message: "请输入身份证", trigger: "blur" },
          {
            min: 3,
            max: 18,
            message: "长度在 3 到 18 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 9, message: "长度在 3 到 9 个字符", trigger: "blur" },
        ],
        phonenumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 3,
            max: 11,
            message: "长度在 3 到 11 个字符",
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
      },
      visible: false,
      dialogVisible: false,
      page: 1,
      num: 10,
      total: null,
      //添加4张表
      Member: {},
      Healthmgr: {},
      Memberdynamicinfo: {},
      Memberinfo: {},
      Membermedicalhistory: {},
      tableData: [],
      filenumber: null,
      name: null,
      phonenumber: null,
      dialogFormVisible: false,
      member: {
        id: null,
        filenumber: null,
        name: "",
        sex: null,
        age: null,
        phonenumber: null,
        createtime: null,
        phonenumber: null,
      },
      formLabelWidth: "120px",
      tankai: "",
    };
  },
  methods: {
    formatteraa: function (row, column, cellvalue) {
      if (cellvalue == 2) {
        return "男";
      } else if (cellvalue == 1) {
        return "女";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.member = Object.assign({}, row);
    },
    addid() {
      const currentTime = new Date().toLocaleString();
      console.log(`$.{currentTime}`);
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1;
      const day = currentDate.getDate();
      const hour = currentDate.getHours();
      const minute = currentDate.getMinutes();
      const second = currentDate.getSeconds();
      this.member.filenumber = `${year}${month}${day}${hour}${minute}${second}`;
      console.log(this.member.filenumber);
    },
    handleDelete(index, row) {
      this.visible = true;
      this.member.id = row.id;
      this.member.name = row.name;
    },
    info() {
      this.axios
        .get("/rear/tkpageEmp", {
          params: {
            page: this.page,
            num: this.num,
            name: this.tankai,
          },
        })
        .then((req) => {
          this.tableData = req.data.list;
          this.total = req.data.total;
        });
    },

    handleSizeChange(val) {
      this.num = val;
      this.info();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.info();
    },
    add() {
      this.Healthmgr = {};
      this.Memberdynamicinfo = {};
      this.Memberinfo = {};
      this.Membermedicalhistory = {};
      (this.ruleForm = {
        filenumber: "",
        idcard: "",
        password: "",
        phonenumber: "",
        name: "",
        sex: "",
        age: "",
      }),
        (this.dialogFormVisible = true);
    },
    addmember() {
      this.ruleForm.filenumber = this.member.filenumber;
      this.axios
        .post("/rear/tkAddme", {
          member: this.ruleForm,
          MemberDynamicinfo: this.Memberdynamicinfo,
          MemberInfo: this.Memberinfo,
          MemberMedicalhistory: this.Membermedicalhistory,
        })
        .then((res) => {
          if (res.data) {
            this.ruleForm = {}; //添加成功清空
            this.$message.success("添加成功");
            this.dialogFormVisible = false;
            this.info();
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在修改中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.2)",
          });

          // this.member.regtime="2019-03-06T16:00:00.000Z"

          this.axios
            .post("/rear/tkupdme", this.member)
            .then((req) => {
              if (req.data > 0) {
                loading.close();
                this.dialogVisible = false;
                this.info();
              } else {
                loading.close();
              }
            })
            .catch(() => {
              loading.close();
            });
        } else {
          console.log("信息未输入完成");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    del() {
      const loading = this.$loading({
        lock: true,
        text: "正在删除中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .get("/rear/tkdelme", { params: this.member })
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.visible = false;
            this.info();
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  created() {
    this.info();
    this.addid();
  },
};
</script>